.fui-tab
  display: flex
  flex-direction: column

  &-head
    position: relative
    display: flex
    flex-shrink: 0
    flex-wrap: wrap
    padding: 0 1rem
    border-bottom: 1px solid $border-default

  &-link-bar
    position: absolute
    bottom: 0
    height: 2px
    background-color: $brand-primary
    transition: all .3s cubic-bezier(.645,.045,.355,1)

  &-item
    padding: .75rem 2rem
    cursor: pointer
    color: $text-default
    transition: all .2s

    &.card
      border-top-left-radius: .25rem
      border-top-right-radius: .25rem
      background-color: $bg-main

      &.active
        background-color: $brand-primary
        color: $text-reverse

    &:not(last-child)
      margin-right: 2px

  &-body
    position: relative
    flex: 1 0 auto
    display: flex
    padding-top: .5rem
    overflow: hidden

    &-wrapper
      flex: 1 0 100%

      &.show
        z-index: 1

      &.hide
        position: absolute
        left: 0
        right: 0
        top: .5rem
        bottom: 0

